<!-- 下拉刷新组件 -->
<template>
	<scroll-view class="openCell" scroll-y @scrolltolower="scrolltolower">
		<slot :list="list"></slot>
		<u-loadmore style="margin-top: 10rpx;" :status="status" />
	</scroll-view>
</template>

<script>
	export default {
		props: {
			/* api接口 */
			listApi: {
				type: Function,
				required: true
			},
			/* 一页多少个数据 */
			pageSize:{
				type:Number,
				default:10
			}
		},
		data() {
			return {
				pageNum: 1,
				status: 'loadmore',
				list: []
			}
		},
		mounted() {
			this.$nextTick(()=>{
				this.getDataList(1)
			})
		},
		methods: {
			//触发事件
			scrolltolower() {				
				this.pageNum++;
				this.status = 'loading';
				this.getDataList();
			},
			getDataList(pageNum) {
				if (pageNum) {
					this.pageNum = pageNum;
					this.list = [];
				}

				this.listApi({
					pageSize: this.pageSize,
					pageNum: this.pageNum
				}).then(data => {
					this.list = [...this.list, ...data.rows];

					const total = Number.parseInt(data.total);
					if (total < this.pageSize) {
						this.status = 'nomore';
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.openCell{
		height: 100%;
		position: relative;
		z-index: -1;
	}
</style>
